<template>
  <div class="goodsdetailed">
    <el-row :gutter="20" style="margin-top: 2%">
      <el-col :span="8"
        ><div class="goodsimg">
          <el-carousel trigger="click" height="420px">
            <el-carousel-item
              v-for="item in goodsData.pictures"
              :key="item.url"
            >
              <el-image
                style="height: 100%"
                :src="item.url"
                fit="cover"
                @click="lookImg"
                class="img"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i></div
              ></el-image>
            </el-carousel-item>
          </el-carousel></div
      ></el-col>
      <el-col :span="12"
        ><div class="goodswork">
          <span
            class="fl"
            id="fServiceName"
            style="
              display: block;
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            "
            >{{ goodsData.goodsName }}</span
          >
          <div class="price">
            <span v-html="strPrice"></span>
            <span class="font-14 font-bold">￥</span
            ><span class="fSaleWebPrice"
              >{{ goodsData.price }}/<span class="font-14">{{
                goodsData.unit
              }}</span></span
            >
            <span v-html="salesPrice"></span>
            <span>￥{{ goodsData.retailPrice }}</span>
          </div>
          <div class="service list">
            <span class="tips">服务方式：</span
            ><el-tag type="success" v-if="goodsData.isDaysend">隔天送达</el-tag
            >&nbsp;
            <el-tag type="info" v-if="goodsData.isAfp">定期送达</el-tag>&nbsp;
            <el-tag type="warning" v-if="goodsData.isCcd">跨市配送</el-tag>
          </div>

          <div>
            <span class="tips list">店家名：</span>
            <span class="values" style="cursor: pointer">{{
              goodsData.storeName
            }}</span>
          </div>
          <div class="list">
            <span class="tips">店家地址：</span>
            <span class="values" style="cursor: pointer">{{
              goodsData.address
            }}</span>
          </div>
          <div class="list">
            <span class="tips">联系电话：</span>
            <span class="values">{{ goodsData.userName }}&nbsp;</span>
            <span class="values">&nbsp;{{ goodsData.phone }}</span>
          </div>
          <div class="list">
            <span class="tips"
              >收货日期（可选，不选则隔天配送）：<el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
                :picker-options="pickerOptions"
              >
              </el-date-picker
            ></span>
          </div>
          <div class="list">
            <span class="tips">数量：</span>
            <span class="values"
              ><el-input-number
                v-model="num"
                :min="1"
                :max="Number(goodsData.inventory)"
                label="数量"
                size="mini"
              ></el-input-number
            ></span>
          </div>
          <div class="list">
            <!-- <button
              type="button"
              class="btn btn-bn isOrNotDisabled_buy isEmployee"
            >
              支付宝支付
            </button> -->
            <button
              type="button"
              class="btn btn-bc testapi margin-l10 margin-r30 fIsOpenPrice isEmployee"
              @click="offlinePay"
            >
              线下货到结算
            </button>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row style="margin-top: 5%; height: 250px">
      <el-col :span="5">
        <div>
          <el-image
            src="images/timgaa.jpg"
            fit="fill"
            style="height: 250px; border-radius: 2px"
          />
        </div>
      </el-col>
      <el-col :span="5" v-for="item in recommendedData" :key="item.picture">
        <div
          style="
            height: 250px;
            margin-left: 2%;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          "
        >
          <el-image
            :src="item.picture"
            fit="cover"
            style="height: 85%"
            @click="detailed(item.id)"
          />
          <span class="txt">{{ item.goodsName }}</span>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 2%">
      <el-col :span="20">
        <el-tabs type="border-card">
          <el-tab-pane
            label="商品详情"
            v-html="goodsData.detailed"
          ></el-tab-pane>
          <!-- <el-tab-pane label="用户评论">用户评论</el-tab-pane> -->
        </el-tabs>
      </el-col>
    </el-row>
    <Bottom />
    <el-dialog :visible.sync="isShowImageDialog">
      <el-carousel height="600px">
        <el-carousel-item v-for="item in goodsData.pictures" :key="item.url">
          <el-image :src="item.url" fit="cover" style="height: 100%" />
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </div>
</template>
<script>
import Bottom from "@/components/Bottom";
import { getGoodsById, detailedGuessYouLike } from "@/api/productApi";
import { saveOrder, calculate } from "@/api/orderApi";
export default {
  components: { Bottom },
  data() {
    return {
      disabledDate: (time) => {
        return time.getTime() > new Date(new Date().getTime());
      },
      num: 1,
      strPrice: "价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：",
      salesPrice:
        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;建议零售价：",
      isShowImageDialog: false,

      value1: null,
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() < new Date(new Date().getTime());
        },
      },
      goodsData: {
        id: "",
        isCcd: false,
        isDaysend: true,
        isAfp: true,
        pictures: [],
        goodsName: "",
        price: "",
        address: "",
        storeName: "",
        phone: "",
        detailed: "",
        pageViews: "",
        inventory: "",
        userName: "",
        retailPrice: "",
      },
      recommendedData: [],
      smoney: 0,
    };
  },
  created() {
    this.initData(this.$route.params.id);
  },
  mounted() {},
  methods: {
    offlinePay() {
      const data = {
        goodsTime: this.value1,
        goodsId: this.goodsData.id,
        num: this.num,
        methodPay: 0,
        orderStatus: 0,
      };
      calculate({
        price: this.goodsData.price,
        num: this.num,
      }).then((res) => {
        if (res.code == 0) {
          this.smoney = res.data;
          this.$confirm(`当前消费金额为${this.smoney},是否订购?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              saveOrder(data).then((res) => {
                if (res.code == 0) {
                  this.$message.success(
                    "恭喜您购买成，你可以前往 我的账单->我的订单查订单状态"
                  );
                } else {
                  this.$message.error(res.message);
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消订购",
              });
            });
        }
      });
    },
    detailed(id) {
      this.initData(id);
    },
    lookImg() {
      this.isShowImageDialog = true;
    },
    initData(id) {
      const loading = this.$loading({
        lock: true,
        text: "查询中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      getGoodsById(id)
        .then((res) => {
          if (res.code == 0) {
            this.goodsData = res.data;
          } else {
            this.$message.error(res.message);
          }
          loading.close();
        })
        .catch((err) => {
          this.$message.error(err);
          loading.close();
        });
      detailedGuessYouLike(id).then((res) => {
        if (res.code == 0) {
          this.recommendedData = res.data;
        } else {
          this.$message.error("获取推荐列表错误");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.goodsdetailed {
  // border: 1px solid red;
  margin-left: 230px;
  overflow-x: hidden;
  .txt {
    padding-left: 20px;
    font-size: 12px;
    color: #000;
    display: inline-block;
    white-space: nowrap;
    animation: 10s wordsLoop linear infinite normal;
  }
  @keyframes wordsLoop {
    0% {
      transform: translateX(200px);
      -webkit-transform: translateX(200px);
    }
    100% {
      transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
    }
  }

  @-webkit-keyframes wordsLoop {
    0% {
      transform: translateX(200px);
      -webkit-transform: translateX(200px);
    }
    100% {
      transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
    }
  }

  .goodsimg {
    height: 420px;
    border: 1px solid black;
    .img {
      cursor: pointer;
    }
  }
  .goodswork {
    height: 420px;
    border: 1px solid #fff;
    .fl {
      font: 12px/1.5 "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB",
        sans-serif;
      font-size: 18px;
      font-weight: bold;
      color: #1b1b1b;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      float: left;
      display: block;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .price {
      height: 40px;
      font: 12px/1.5 "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB",
        "\5b8b\4f53", sans-serif;
      color: #333;
      box-sizing: border-box;
      margin: 1% 0 0 0;
      padding: 0;
      width: 100%;
      float: left;
      line-height: 40px;
      background: url("../../assets/img/background.png") repeat-x 0 0;
      text-indent: 1em;
      .fSaleWebPrice {
        font: 12px/1.5 "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB",
          "\5b8b\4f53", sans-serif;
        line-height: 30px;
        font-size: 20px;
        font-weight: bold;
        color: #4bb1a6;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .font-14 {
        font: 12px/1.5 "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB",
          "\5b8b\4f53", sans-serif;
        line-height: 30px;
        color: #4bb1a6;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 14px;
        font-weight: bold;
      }
      // background-size: 100% 100%;
    }
    .service {
      height: 10%;
      // border: 1px solid red;
      margin: 13% 0 0 0;
    }
  }
}
.tips {
  font: 12px/1.5 "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB",
    "\5b8b\4f53", sans-serif;
  margin: 0;
  box-sizing: border-box;
  padding: 3px 0;
  display: inline-block;
  color: #aeaeae;
  text-indent: 1em;
}
.values {
  font: 12px/1.5 "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB",
    "\5b8b\4f53", sans-serif;
  color: #6b6b6b;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  margin: 0;
  outline: none;
  text-align: center;
  border: 1px solid transparent;
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  overflow: visible;
  width: 160px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  font-size: 18px;
  border-radius: 5px;
  box-sizing: border-box;
  color: #fff;
  background: #ffb54c;
  margin-left: 0.5em;
}
.btn-bc {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  margin: 0;
  margin-left: 10px;
  outline: none;
  text-align: center;
  border: 1px solid transparent;
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  overflow: visible;
  width: 160px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  font-size: 18px;
  border-radius: 5px;
  box-sizing: border-box;
  background: #4bb1a6;
  color: #fff;
}
.list {
  margin: 2.4% 0 0 0;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>